<template>
  <view class="inner-wrapper pay-wrapper" style="background:#FAFBFB;">
    <view class="pay-box">
      <view v-if="noList" class="nolist">
        <image src="/static/images/meiyou.png" />
        <div style="font-size:14px;">呜呜~你还没有社保公积金缴纳记录</div>
      </view>
      <view v-else class="paylist" style="margin-bottom: 24px">
        <div
          v-for="(item, index) in payMonthList"
          :key="index"
          class="payitem flex"
          @click="goMonthDetail(item)"
        >
          <div class="henxing flex-center">
            <i class="iconfont tc-theme mr12 fs18">&#xe609;</i>
            <span>{{ item.year + "年" + item.month + "月" }}</span>
          </div>
          <image src="/static/images/right.png" />
        </div>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
import { getShebaoInfo } from "@/services/shebao";
export default {
  data() {
    return {
      companyId: "",
      confirmed: false,
      show_something_wrong: false,
      payMonthList: [],
      weixinInfo: {},
      currentYear: "",
      noList: true,
      pageNo: 1,
      nomore: false,
      loading: false
    };
  },
  computed: {
    ...mapState(["user", "site"]),
    wH() {
      return uni.getSystemInfoSync().windowHeight - 44
    }
  },
  created() {
    this.loadData()
  },
  onReachBottom() {
    console.log("onReachBottom")
    if (!this.nomore && !this.loading) {
      this.pageNo += 1;
      this.loadData()
    }
  },
  methods: {
    loadData() {
      this.loading = true;
      uni.showLoading({
        title: "加载中"
      });
      getShebaoInfo(this.pageNo).then(res => {
        this.loading = false
        uni.hideLoading();
        this.payMonthList = [].concat(this.payMonthList, res.entities);
        if (this.payMonthList.length > 0) {
          this.noList = false;
        } else {
          this.noList = true;
        }
        if (this.pageNo >= res.pageCount) {
          this.nomore = true
        } else {
          if (54 * this.payMonthList.length < this.wH) {
            this.loadData()
          }
        }
      }).catch(err => {
        console.log(err);
        this.loading = false
        uni.hideLoading();
      })
    },
    goMonthDetail(item) {
      const itemss = encodeURIComponent(JSON.stringify(item));
      uni.navigateTo({
        url: "/pages/shebao/shebaoDetail?item=" + itemss
      });
    }
  }
};
</script>

<style lang="scss">
.henxing {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.background-top {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100px;
  border-bottom-right-radius: 60px;
  border-bottom-left-radius: 60px;
  background-color: $uni-color-primary;
}
// 工资条样式
.pay-wrapper {
  position: relative;
  background-color: $bg-gray;

  .pay-box {
    position: absolute;
    top: 20px;
    left: 5%;
    width: 90%;

    .staff-info {
      width: 100%;
      height: 94px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      display: flex;
      align-items: center;

      image {
        display: block;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        margin: 0 12px 0 30px;
      }

      .staff-right {
        .staff-name {
          font-size: 18px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 26px;
        }

        .staff-company {
          font-size: 12px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
          line-height: 20px;
        }
      }
    }

    .calender-wrap {
      // width:100%;
      height: 44px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      margin: 12px auto;

      image {
        width: 20px;
        height: 20px;
      }

      span {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        line-height: 44px;
      }
    }

    .nolist {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      margin-top: 50px;
      image {
        width: 200px;
        height: 200px;
      }

      p {
        width: 200px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(192, 192, 192, 1);
        line-height: 20px;
        text-align: center;
        margin-top: 12px auto;
      }
    }

    .paylist {
      width: 100%;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.08);
      border-radius: 12px;

      .payitem {
        height: 54px;
        margin: 0 20px;
        justify-content: space-between;
        border-bottom: 1px solid #e8e8e8;

        image {
          width: 20px;
          height: 20px;
        }

        span {
          display: block;
          font-size: 15px;
          font-weight: 400;
          color: rgba(119, 119, 119, 1);
          line-height: 21px;
        }
      }

      .payitem:nth-last-of-type(1) {
        border: none;
      }
    }
  }
}
</style>
